<template>
	<view class="cu-modal" :class="show ? 'show' : ''">
		<view class="cu-dialog">
			
			<view class="padding-xl">
				<view class="check-icon" style="padding:20rpx" v-if="type === 'success'">
					<text class="cuIcon-check bg-blue text-white filltext"></text>
				</view>
				<view class="check-icon" style="font-size: 80rpx;" v-else-if="type === 'info'">
					<text class="cuIcon-infofill text-gray"></text>
				</view>
				<view class="check-icon" style="font-size: 80rpx;" v-else-if="type === 'loading'">
					<text class="cuIcon-loading2 text-blue"></text>
				</view>
				<view class="">
					{{ props.message }}
				</view>
			</view>
			<view class="cu-bar bg-white btn-bar">
				<view class="bar-row" v-if="props.cancelable" style="">
					<view style="width: 48%;">
						<CuButton @click="handleCancel" plain>{{ cancelText }}</CuButton>
					</view>
					<view style="width: 48%;">
						<CuButton @click="handleConfirm">确认</CuButton>
					</view>
				</view>
				<view v-else style="width: 100%;">
					<CuButton @click="handleConfirm">确认</CuButton>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import CuButton from "@/components/CuButton.vue"
import { ref } from 'vue';
const props = defineProps({
	message: {
		type: String,
		default: ""
	},
	show: {
		type: Boolean,
		default: false
	},
	type: {
		type: String,
		default: "success"
	},
	cancelable: {
		type: Boolean,
		default: false
  },
	cancelText: {
		type: String,
		default: "取消"
	}
})
const emit = defineEmits(['update:show', "confirm", "cancel"])

const handleConfirm = () => {
	emit("confirm")
	// emit("update:show", false)
}
const handleCancel = () => {
	emit("cancel")
	emit("update:show", false)
}

</script>

<style lang="stylus" scoped>
.cu-dialog
	background-color #fff
	.btn-bar
		padding 40rpx
		.bar-row
			display: flex
			justify-content: space-between
			width: 100%
	.check-icon
		text-align: center
		margin: 50rpx 0 20rpx
		.filltext
			padding: 20rpx
			border-radius: 40rpx
	
</style>